<template>
	<view class="success-container">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<text class="page-title">投标成功</text>
		</view>
		
		<!-- 成功内容 -->
		<view class="success-content">
			<!-- 成功图标 -->
			<view class="success-icon-wrapper">
				<image class="success-icon" src="/static/icons/check-circle.png"></image>
			</view>
			
			<!-- 成功信息 -->
			<text class="success-title">投标提交成功！</text>
			<text class="success-desc">您的投标已成功提交，我们将尽快审核并与您联系。</text>
			
			<!-- 项目信息 -->
			<view class="project-card">
				<text class="project-title">{{ project.title }}</text>
				<view class="project-info">
					<view class="info-item">
						<text class="info-label">投标报价</text>
						<text class="info-value">￥{{ formData.price }}{{ formData.priceUnit }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">服务周期</text>
						<text class="info-value">{{ formData.duration }}{{ formData.durationUnit }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">投标时间</text>
						<text class="info-value">{{ submitTime }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">投标编号</text>
						<text class="info-value">{{ bidNumber }}</text>
					</view>
				</view>
			</view>
			
			<!-- 提示信息 -->
			<view class="tips-box">
				<view class="tip-item">
					<image class="tip-icon" src="/static/icons/notification.png"></image>
					<text class="tip-text">项目方查看您的投标后，会主动与您联系</text>
				</view>
				<view class="tip-item">
					<image class="tip-icon" src="/static/icons/time.png"></image>
					<text class="tip-text">您可以在"我的投标"中查看投标状态和详情</text>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="bottom-actions">
			<button class="action-btn secondary-btn" @tap="goBidList">查看我的投标</button>
			<button class="action-btn primary-btn" @tap="goHome">返回首页</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				projectId: null,
				bidId: null,
				project: {
					id: 101,
					title: '智能制造设备采购项目'
				},
				formData: {
					price: '680',
					priceUnit: '万元',
					duration: '90',
					durationUnit: '天'
				},
				submitTime: '2023-06-10 15:32:45',
				bidNumber: 'BID' + Date.now().toString().substring(3, 10)
			}
		},
		onLoad(options) {
			if (options.projectId) {
				this.projectId = options.projectId;
			}
			
			if (options.bidId) {
				this.bidId = options.bidId;
			}
			
			// 在实际项目中，应该从后端获取投标详情
			// this.getBidDetail(this.bidId);
			
			// 生成随机的投标编号
			this.generateBidNumber();
			
			// 获取当前时间作为投标时间
			this.getCurrentTime();
		},
		methods: {
			generateBidNumber() {
				// 使用时间戳和随机数生成投标编号
				const timestamp = Date.now().toString().substring(3, 10);
				const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
				this.bidNumber = `BID${timestamp}${random}`;
			},
			getCurrentTime() {
				const now = new Date();
				
				// 格式化日期时间
				const year = now.getFullYear();
				const month = (now.getMonth() + 1).toString().padStart(2, '0');
				const day = now.getDate().toString().padStart(2, '0');
				const hours = now.getHours().toString().padStart(2, '0');
				const minutes = now.getMinutes().toString().padStart(2, '0');
				const seconds = now.getSeconds().toString().padStart(2, '0');
				
				this.submitTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			goBidList() {
				// 跳转到我的投标列表页面
				uni.navigateTo({
					url: '/pages/user/my-bids'
				});
			},
			goHome() {
				// 返回首页
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style>
	.success-container {
		min-height: 100vh;
		background-color: #f5f7fa;
		display: flex;
		flex-direction: column;
		position: relative;
	}
	
	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #fff;
	}
	
	.navbar {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 30rpx;
		height: 100rpx;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.page-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}
	
	.success-content {
		flex: 1;
		padding: 60rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.success-icon-wrapper {
		width: 160rpx;
		height: 160rpx;
		background: rgba(34, 197, 94, 0.1);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;
	}
	
	.success-icon {
		width: 100rpx;
		height: 100rpx;
	}
	
	.success-title {
		font-size: 40rpx;
		font-weight: 600;
		color: #22c55e;
		margin-bottom: 20rpx;
	}
	
	.success-desc {
		font-size: 28rpx;
		color: #666;
		text-align: center;
		margin-bottom: 60rpx;
		line-height: 1.5;
	}
	
	.project-card {
		width: 100%;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 60rpx;
	}
	
	.project-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 30rpx;
		line-height: 1.4;
	}
	
	.project-info {
		display: flex;
		flex-direction: column;
	}
	
	.info-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}
	
	.info-label {
		font-size: 28rpx;
		color: #666;
	}
	
	.info-value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}
	
	.tips-box {
		width: 100%;
		background-color: #f0f9ff;
		border-radius: 16rpx;
		padding: 30rpx;
	}
	
	.tip-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}
	
	.tip-item:last-child {
		margin-bottom: 0;
	}
	
	.tip-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
		flex-shrink: 0;
	}
	
	.tip-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
	}
	
	.bottom-actions {
		padding: 40rpx;
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #f0f0f0;
		background-color: #fff;
	}
	
	.action-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: 600;
	}
	
	.secondary-btn {
		background-color: #f3f4f6;
		color: #6b7280;
		margin-right: 20rpx;
	}
	
	.primary-btn {
		background-color: #1d4ed8;
		color: #fff;
	}
</style> 